<template>
    <div class="list">
        <div class="item" v-for="(item,index) in list" :key="item.name">
            <video :src="item.link" controls :poster="videoCovers[index]"></video>
            <p>{{item.name}}</p>
        </div>
    </div>
</template>

<script>
    export default {
        computed:{
            list(){
                const links = [
                    `https://hongyuanfs.oss-cn-beijing.aliyuncs.com/media/SBS%E5%AE%9E%E6%93%8D%E6%AF%94%E8%B5%9B.mp4`,
                    `https://hongyuanfs.oss-cn-beijing.aliyuncs.com/media/%E3%80%90%E5%AE%8F%E6%BA%90%E5%85%AC%E5%BC%80%E8%AF%BE%20%20%20SBS%20%20%E6%9D%8E%E5%9B%BD%E4%BA%AE%E3%80%91.mp4`,
                    `https://hongyuanfs.oss-cn-beijing.aliyuncs.com/media/%E3%80%90%E5%AE%8F%E6%BA%90%E6%9C%BA%E6%A2%B0%E5%8C%96%E5%96%B7%E6%B6%82%E3%80%91.mp4`,
                    `https://hongyuanfs.oss-cn-beijing.aliyuncs.com/media/%E6%A0%87%E5%87%86%E5%8C%96%E6%96%BD%E5%B7%A5%E5%AE%A3%E4%BC%A0%E7%89%87.mp4`,
                    `https://hongyuanfs.oss-cn-beijing.aliyuncs.com/media/%E9%AB%98%E5%88%86%E5%AD%90%E6%AF%94%E8%B5%9B.mp4`
                ]
                const _list = this.$t("standard.video.list");
                const _resultArr = [];
                links.map((item,i) => {
                    _resultArr.push({
                        link:item,
                        name:_list[i]
                    })
                })
                return _resultArr;
            },
            videoCovers(){
                const result = [];
                for (let index = 0; index < 10; index++) {
                    result.push(require(`@/assets/img/videoCover/v${index+1}.png`))
                }
                return result;
            }
        }
    }
</script>

<style lang="less" scoped>
.list {
    display: flex;
    flex-wrap: wrap;
    .item {
        flex: 0 0 248px;
        margin-right: 10px;
        margin-bottom: 40px;
        video{
            width: 248px;
            height: 360px;
            margin-bottom: 16px;
        }
        &:nth-of-type(5n) {
            margin-right: 0;
        }
        p {
            text-align: left;
            font-size:14px;
            font-weight:400;
            color:rgba(51,51,51,1);
            line-height:20px;
        }
    }
}
</style>